<template>
  <div class="rent-table">
    <div class="options-header">
      <!-- <el-input v-model="search" placeholder="请输入用户ID" prefix-icon="el-icon-search" class="search-input"/>
      <el-button :loading="false" type="primary" class="search-btn">{{ searchText }}</el-button> -->
      <el-button type="primary" class="search-btn">添加用户</el-button>
    </div>
    <el-table :data="tableData" :highlight-current-row="true" border style="width: 100%" class="data-table">
      <el-table-column prop="userid" label="用户ID" width="220" class="type"/>
      <el-table-column prop="password" label="密码" width="220"/>
      <el-table-column prop="userName" label="姓名" width="220"/>
      <el-table-column prop="nickname" label="昵称" width="300"/>
      <el-table-column prop="phone" label="手机号" width="220" />
      <el-table-column label="操作" min-width="319">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleClick(scope.$index)">详情</el-button>
          <el-button type="primary" @click="handleDialogClick(scope)">修改</el-button>
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog :visible.sync="dialogFormVisible" title="修改">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="" class="form-item">
          <span>用户名：</span><el-input v-model="form.username" placeholder="请输入内容" class="maintain-input"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="" class="form-item">
          <span>昵称：</span><el-input v-model="form.nickname" placeholder="请输入内容" class="maintain-input"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="" class="form-item">
          <span>密码：</span><el-input v-model="form.password" placeholder="请输入内容" class="maintain-input"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="" class="form-item">
          <span>手机：</span><el-input v-model="form.phone" placeholder="请输入内容" class="maintain-input"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="" class="form-item">
          <span>用户ID：</span><el-input v-model="form.userId" placeholder="请输入内容" class="maintain-input"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <router-view/>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      tableData: [{
        userid: '用户ID',
        userName: '王小虎',
        password: 'dx154578595',
        nickname: '未审核',
        phone: '15478956354'
      }],
      region: '',
      search: '',
      searchText: '搜索',
      dialogFormVisible: false,
      form: {
        username: '',
        nickname: '',
        password: '',
        phone: '',
        userId: ''
      },
      formLabelWidth: '40px',
      pass: 3,
      currentPage4: 1,
      total: 10,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      }
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
      this.$router.push({
        path: '/message/sell/detail'
      })
    },
    handleDialogClick(info) {
      console.log(info)
      this.dialogFormVisible = true
    },
    getList() {

    }
  }
}
</script>
<style lang="scss" scoped>
.rent-table {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .options-header {
    display: flex;
    margin-bottom: 20px;
    .search-input {
      margin-right: 20px;
      flex:1;
    }
    .select {
      margin-right: 20px;
      flex:1;
    }
    .search-btn {
     width: 100px;
    }
  }
  .data-table{
    margin-bottom: 20px;
  }
  .form-item{
    display: flex;
    span {
      display: block;
    }
    .maintain-input {
      width: 300px;
    }
  }
}
</style>
